<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi "> 
<title>绑定手机号</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.js"></script>
</head>

<body>
	<header class="header">
		<div class="header_left">
			<img src="images/guanbi.png" alt="">
		</div>
		<div class="header_zi">
			心连心爱心筹
		</div>
		<div class="header_right">
			<img src="images/gengduo.png" alt="">
		</div>
	</header>
	<div class="header_gaodu"></div>
	<div class="bdsjh">
		<a href="javascript:history.go(-1);">
			<div class="bdsjh1">
				<img src="images/fh1.png" alt="" style="width: 100%;">
			</div>
		</a>
		<div class="bdsjh2">
			个人资料
		</div>
	</div>
	<div class="touxiang">
		<div class="touxiang1">
			头像
		</div>
		<div class="touxiang2" id="preview">
			<img src="images/touxiang.jpg" alt="" id="imghead" border="0" onClick="$('#previewImg').click();" width="50" height="50">
		</div>
		<input type="file" onChange="previewImage(this)" class="touxiang4" id="previewImg">
		<div class="clearfix"></div>
	</div>
	<div class="touxiang">
		<div class="xingming1">
			姓名
		</div>
		<div class="xingming2">
			<input type="text" value="Angel">
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="touxiang3">
		<div class="xingming1">
			联系电话
		</div>
		<div class="xingming2">
			<input type="text" value="15805391234">
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="jiange"></div>
	<div class="denglu">
		退出登陆
	</div>
	<script>
	  //图片上传预览    IE是用了滤镜。
		function previewImage(file)
		{
		  var MAXWIDTH  = 50; 
		  var MAXHEIGHT = 50;
		  var div = document.getElementById('preview');
		  if (file.files && file.files[0])
		  {
			  div.innerHTML ='<img id=imghead onclick=$("#previewImg").click()>';
			  var img = document.getElementById('imghead');
			  img.onload = function(){
				var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				img.width  =  rect.width;
				img.height =  rect.height;
	//                 img.style.marginLeft = rect.left+'px';
				img.style.marginTop = rect.top+'px';
			  }
			  var reader = new FileReader();
			  reader.onload = function(evt){img.src = evt.target.result;}
			  reader.readAsDataURL(file.files[0]);
		  }
		  else //兼容IE
		  {
			var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
			file.select();
			var src = document.selection.createRange().text;
			div.innerHTML = '<img id=imghead>';
			var img = document.getElementById('imghead');
			img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
			status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
			div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
		  }
		}
		function clacImgZoomParam( maxWidth, maxHeight, width, height ){
			var param = {top:0, left:0, width:width, height:height};
			if( width>maxWidth || height>maxHeight ){
				rateWidth = width / maxWidth;
				rateHeight = height / maxHeight;

				if( rateWidth > rateHeight ){
					param.width =  maxWidth;
					param.height = Math.round(height / rateWidth);
				}else{
					param.width = Math.round(width / rateHeight);
					param.height = maxHeight;
				}
			}
			param.left = Math.round((maxWidth - param.width) / 2);
			param.top = Math.round((maxHeight - param.height) / 2);
			return param;
		}
	</script>
</body>
</html>
